<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px">
            <el-dropdown>
                <span class="el-dropdown-link">
<!--                    <br />张三-->
                    <br />{{user.nickName}}
                  <el-icon class="el-icon--right" style="margin-top: 12px">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
                        <el-dropdown-item divided @click="$router.push('/login')">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    import { ArrowDown } from '@element-plus/icons-vue'
    export default {
        name: "Header",
        props: ['user'],
        data() {
            return {
                user:{}
            }
        },
        created() {
            let userStr = sessionStorage.getItem("user"||"{}")
            console.log("userStr:"+userStr)
            /*this.$nextTick(() => {
                this.user = JSON.parse(userStr)
            })*/
            if (userStr === null || userStr === ''){
                console.log("无用户时")
                this.user.nickName = "暂无用户"
            } else {
                console.log("有用户时")
                this.user = JSON.parse(userStr)
            }
        }
    }
</script>

<style scoped>
    .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }
</style>